<template>
    <view class="anchor-wrapper" :style="anchorWrapperStyle">
        <view class="anchor" :style="anchorStyle">
            <view v-if="anchorSlot.height !== 0" class="anchor-slot">
                <slot></slot>
            </view>

            <view v-if="anchorSlot.height === 0" class="anchor-default l-anchor-class">
                {{ anchorText }}
            </view>
        </view>
    </view>
</template>

<script>
import lIndexList from '../index-list/index';
import nodeUtil from '../core/utils/node-util';
export default {
    unicomGroup: ['index-list'],
    data() {
        return {
            anchorSlot: {
                height: -1
            },
            anchor: {
                height: 0
            },
            anchorText: '',
            anchorStyle: '',
            anchorWrapperStyle: ''
        };
    },
    externalClasses: ['l-anchor-class'],
    options: {
        multipleSlots: true,
        pureDataPattern: /^_/
    },
    relations: {
        '../index-list/index': {
            type: 'parent'
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this.parseAnchorSlotRect();
        },

        async parseAnchorSlotRect() {
            const t = await nodeUtil.getNodeRectFromComponent(this, '.anchor-slot');
            if (t) {
                this.setData({
                    'anchorSlot.height': t.height
                });
            } else {
                this.setData({
                    'anchorSlot.height': 0
                });
            }
        },

        async parseAnchorRect() {
            const t = await nodeUtil.getNodeRectFromComponent(this, '.anchor');
            if (t) {
                this.setData({
                    'anchor.height': t.height
                });
            }
        },

        setFixed(t, e) {
            const a = `\n        position:fixed;\n        top:${t}rpx;\n      `;
            const o = `height:${e}px;`;
            this.setData({
                anchorStyle: a,
                anchorWrapperStyle: o
            });
        },

        setRelative(t) {
            const e = `\n        position:relative;\n        transform: translate3d(0, ${t}px, 0);\n       `;
            this.setData({
                anchorStyle: e
            });
        },

        clearStyle() {
            this.setData({
                anchorStyle: '',
                anchorWrapperStyle: ''
            });
        },

        isRelative() {
            return this.anchorStyle.indexOf('relative') > 0;
        },

        isFixed() {
            return this.anchorStyle.indexOf('fixed') > 0;
        }
    },
    created: function () {}
};
</script>
<style>
.anchor-wrapper {
    width: 100%;
}
.anchor-wrapper .anchor {
    width: 100%;
}
.anchor-wrapper .anchor-default {
    width: 100%;
    background-color: #f7f8fa;
    display: flex;
    align-items: center;
    padding: 8rpx 0 8rpx 30rpx;
    font-size: 26rpx;
    font-weight: 700;
    color: #323132;
    box-sizing: border-box;
}
</style>
